<template>
  <el-dialog v-model="dialogVisible" title="新增话题" width="80%">
    <el-form :model="form" label-width="100px" class="dialog-form">
      <el-form-item label="话题标题">
        <el-input
            v-model="form.title"
            placeholder="请输入话题标题"
            class="dialog-input"
        ></el-input>
      </el-form-item>

      <!-- 关联职业类型 -->
      <el-form-item label="关联职业">
        <el-select
            v-model="form.classType"
            placeholder="请选择职业"
            clearable
            class="dialog-select"
        >
          <el-option
              v-for="cls in wowClasses"
              :key="cls.id"
              :label="cls.name"
              :value="cls.id"
          >
            <div style="display: flex; align-items: center;">
              <img :src="cls.image" :alt="cls.name" style="width: 20px; height: 20px; margin-right: 10px;">
              <span>{{ cls.name }}</span>
            </div>
          </el-option>
        </el-select>
      </el-form-item>

      <!-- 话题类型 -->
      <el-form-item label="话题类型">
        <el-select
            v-model="form.topicType"
            placeholder="请选择类型"
            class="dialog-select"
        >
          <el-option label="攻略" value="guide"></el-option>
          <el-option label="副本" value="dungeon"></el-option>
          <el-option label="竞技场" value="arena"></el-option>
        </el-select>
      </el-form-item>

      <!-- 内容编辑器 -->
      <el-form-item label="内容">
        <div class="rich-editor-container">
          <quill-editor
              v-model:content="form.content"
              contentType="html"
              :options="editorOptions"
          />
        </div>
      </el-form-item>

      <!-- 付费解锁功能 -->
      <el-form-item label="付费解锁">
        <el-switch
            v-model="form.isPaidContent"
            active-text="启用付费内容"
            inactive-text="免费内容"
        />
      </el-form-item>

      <!-- 付费金额输入框 -->
      <el-form-item v-if="form.isPaidContent" label="付费金额">
        <el-input-number
            v-model="form.price"
            :min="1"
            :max="1000"
            :precision="2"
            controls-position="right"
            placeholder="请输入金额"
            class="paid-input"
        />
        <span style="margin-left: 10px; color: #ffcc00;">金币</span>
      </el-form-item>

      <!-- 付费内容编辑器 -->
      <el-form-item v-if="form.isPaidContent" label="付费内容">
        <div class="rich-editor-container">
          <quill-editor
              v-model:content="form.paidContent"
              contentType="html"
              :options="editorOptions"
          />
        </div>
        <div class="paid-hint">
          <i class="fas fa-lock"></i> 此部分内容需要付费后才能查看
        </div>
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button @click="closeDialog" class="dialog-button">取消</el-button>
      <el-button type="primary" @click="submitForm" class="dialog-button primary">提交</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { defineComponent, ref, watch } from 'vue';
import { ElMessage } from 'element-plus';
import { QuillEditor } from '@vueup/vue-quill';
// import '@vueup/vue-quill/dist/vue-quill.snow.css';
import '@vueup/vue-quill/dist/vue-quill.snow.css'
export default defineComponent({
  name: 'NewTopicDialog',
  components: {
    QuillEditor // 注册组件
  },
  props: {
    wowClasses: {
      type: Array,
      required: true
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  emits: ['update:visible', 'submit'],
  setup(props, { emit }) {
    const dialogVisible = ref(false);

    // 表单数据
    const form = ref({
      title: '',
      classType: '',
      topicType: '',
      content: '',
      isPaidContent: false,
      price: 0,
      paidContent: '' // 新增付费内容字段
    });

    // 富文本编辑器配置
    const editorOptions = ref({
      modules: {
        toolbar: [
          ['bold', 'italic', 'underline', 'strike'],
          ['blockquote', 'code-block'],
          [{ 'header': 1 }, { 'header': 2 }],
          [{ 'list': 'ordered' }, { 'list': 'bullet' }],
          [{ 'script': 'sub' }, { 'script': 'super' }],
          [{ 'indent': '-1' }, { 'indent': '+1' }],
          [{ 'direction': 'rtl' }],
          [{ 'size': ['small', false, 'large', 'huge'] }],
          [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
          [{ 'color': [] }, { 'background': [] }],
          [{ 'font': [] }],
          [{ 'align': [] }],
          ['clean'],
          ['link', 'image', 'video']
        ]
      },
      placeholder: '请输入内容...',
      theme: 'snow'
    });

    // 监听visible属性变化
    watch(() => props.visible, (val) => {
      dialogVisible.value = val;
    });

    // 监听dialogVisible变化
    watch(dialogVisible, (val) => {
      emit('update:visible', val);
    });

    // 关闭弹窗
    const closeDialog = () => {
      dialogVisible.value = false;
    };

    // 提交表单
    const submitForm = () => {
      // 表单验证
      if (!form.value.title.trim()) {
        ElMessage.warning('请输入话题标题');
        return;
      }

      if (!form.value.topicType) {
        ElMessage.warning('请选择话题类型');
        return;
      }

      if (form.value.isPaidContent && form.value.price <= 0) {
        ElMessage.warning('付费内容需要设置金额');
        return;
      }

      // 触发submit事件
      emit('submit', form.value);

      // 重置表单
      form.value = {
        title: '',
        classType: '',
        topicType: '',
        content: '',
        paidContent: '',
        isPaidContent: false,
        price: 0
      };

      // 关闭弹窗
      dialogVisible.value = false;
    };

    return {
      dialogVisible,
      form,
      editorOptions,
      closeDialog,
      submitForm
    };
  }
});
</script>

<style scoped>
/* 统一UI样式 */
.dialog-form {
  background-color: rgba(26, 30, 35, 0.85);
  border: 1px solid #3a4758;
  backdrop-filter: blur(5px);
  border-radius: 10px;
  padding: 20px;
}

.dialog-input :deep(.el-input__wrapper) {
  background-color: rgba(26, 30, 35, 0.7);
  border: 1px solid #3a4758;
  color: #e6e6e6;
  border-radius: 8px;
}

.dialog-select :deep(.el-input__wrapper) {
  background-color: rgba(26, 30, 35, 0.7);
  border: 1px solid #3a4758;
  color: #e6e6e6;
  border-radius: 8px;
}

.paid-input :deep(.el-input__inner) {
  color: #ffcc00;
}

.rich-editor-container {
  background-color: rgba(26, 30, 35, 0.7);
  border-radius: 4px;
  border: 1px solid #3a4758;
}

:deep(.ql-toolbar) {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  background-color: rgba(42, 58, 74, 0.3);
}

:deep(.ql-container) {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  height: 300px;
  background-color: rgba(26, 30, 35, 0.7);
}

:deep(.ql-editor) {
  color: #e6e6e6;
}

.paid-hint {
  margin-top: 10px;
  padding: 8px;
  background-color: rgba(255, 204, 0, 0.1);
  border: 1px solid #ffcc00;
  border-radius: 4px;
  color: #ffcc00;
  font-size: 14px;
}

.dialog-button {
  background-color: rgba(42, 58, 74, 0.3);
  border: 1px solid #3a4758;
  color: #e6e6e6;
  border-radius: 20px;
  padding: 8px 20px;
}

.dialog-button.primary {
  background-color: rgba(67, 97, 238, 0.3);
  color: #ffcc00;
  border-color: #ffcc00;
}

.dialog-button:hover {
  background-color: rgba(42, 58, 74, 0.5);
}

.dialog-button.primary:hover {
  background-color: rgba(67, 97, 238, 0.5);
}
</style>
